<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { DataOverObject, SegmentItem } from '@/types/interface'
import useLoading from '@/utils/useLoading'

// 数据总览
const dataOverList = ref<DataOverObject[]>([
    {
        title: '今日入库量',
        color: '75,170,240',
        value: 0,
        unit: '',
    },
    {
        title: '今日出库量',
        color: '75,170,240',
        value: 0,
        unit: ''
    },
    {
        title: '入库商品总额',
        color: '75,170,240',
        value: 0,
        unit: '万元'
    },
    {
        title: '出库商品总额',
        color: '75,170,240',
        value: 0,
        unit: '万元'
    },
])

// 今日、本周、本月
const segmentItems = reactive<SegmentItem[]>([
    {
        type: 1,
        title: '今日',
        isSelect: true
    },
    {
        type: 2,
        title: '本周'
    },
    {
        type: 3,
        title: '本月'
    }
])

const { show, hide } = useLoading()
const selectedDone = ()=>{
    show()
    setTimeout(() => {
        hide()
    }, 1000);
}
</script>

<template>
    <div class="full-w">
        <SepTitle title="今日数据统计">
            <template #header>
                <Segment :selectItems="segmentItems" @selectedDone="selectedDone"></Segment>
            </template>
            <template #main>
                <div class="row-normal-wrap full-w p-a-10" style="overflow: auto;">
                    <div class="full-w-0 row-normal-space-around-wrap">
                        <DataOverViewCell class="dataOverViewCell" v-for="(item,index) in dataOverList" :class="[(index > 3 && 'p-t-10')]" :key="index" :item="item"></DataOverViewCell>
                    </div>
                </div>
            </template>
        </SepTitle>
    </div>
</template>   

<style lang="stylus" scoped>
@import "stylus-px2rem";
@import url('@/css/normal.styl');
.dataOverViewCell 
    width 25%
</style>